<template>
  <div class="login-register">
    <div class="contain">
      <div class="big-box" :class="{active:isLogin}">
        <div class="big-contain" v-if="isLogin">
          <div class="btitle">审批人员登录</div>
          <el-form ref="loginFormRef" :model="loginForm" label-width="80px" :rules="loginFormRules" :hide-required-asterisk="true">
            <el-form-item label="角色" prop="role">
              <el-select v-model="loginForm.role" placeholder="请选择您的身份">
                <el-option label="指导老师" value="1"/>
                <el-option label="专业负责人" value="2"/>
                <el-option label="系主任" value="3"/>
                <el-option label="教务处" value="4"/>
              </el-select>
            </el-form-item>
            <el-form-item label="账号" prop="no">
              <el-input v-model="loginForm.no" placeholder="账号">
                <template #prefix>
                  <el-icon class="el-input__icon"><user /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="密码" prop="userpwd">
              <el-input type="password" v-model="loginForm.userpwd" placeholder="密码" show-password>
                <template #prefix>
                  <el-icon class="el-input__icon"><lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="check">
              <el-input type="text" clearable v-model.number="loginForm.check" placeholder="请输入验证码"></el-input>
              <div class="code" @click="refreshCode">
                <s-identify :identifyCode="identifyCode"></s-identify>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button color="#5cb3cc" @click="superLogin" style="color: white">立即登录</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div class="big-contain" v-else>
          <div class="btitle">申报用户登录</div>
          <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="80px" :hide-required-asterisk="true">
            <el-form-item label="账号" prop="no">
              <el-input v-model="loginForm.no" placeholder="账号">
                <template #prefix>
                  <el-icon class="el-input__icon"><user /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="密码" prop="userpwd">
              <el-input type="password" v-model="loginForm.userpwd" placeholder="密码" show-password>
                <template #prefix>
                  <el-icon class="el-input__icon"><lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="check">
              <el-input type="text" clearable v-model.number="loginForm.check" placeholder="请输入验证码"/>
              <div class="code" @click="refreshCode">
                <s-identify :identifyCode="identifyCode"></s-identify>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button color="#5cb3cc" @click="login" style="color: white">立即登录</el-button>
              <el-button color="#5cb3cc" v-on:click="register" plain>立即注册</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="small-box" :class="{active:isLogin}">
        <div class="small-contain" v-if="isLogin">
          <div class="stitle">你好<br>审核人员!</div>
          <p class="scontent">三顾频烦天下计，<br>两朝开济老臣心。</p>
          <button class="sbutton" @click="changeType">切换</button>
        </div>
        <div class="small-contain" v-else>
          <div class="stitle">欢迎使用!</div>
          <p class="scontent">千磨万击还坚劲，<br>任尔东西南北风。</p>
          <button class="sbutton" @click="changeType">切换</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {mapMutations} from 'vuex'
import SIdentify from '@/components/SIdentify'

export default {
  name: 'login-register',
  components: {
    SIdentify,
  },
  data() {
    return {
      identifyCodes: "1234567890",
      identifyCode: "",

      isLogin: false,
      loginForm: {
        no: '',
        userpwd: '',
      },
      // 这是表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        no: [
          {required: true, message: '请输入登录名称', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
        ],
        // 验证密码是否合法
        userpwd: [
          {required: true, message: '请输入登录密码', trigger: 'blur'},
          {min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur'}
        ],
        // 验证验证码是否合法
        check:[
          {required: true,message: '请输入验证码', trigger: 'blur'},
          {min:1000,max:9999,type: 'number', message: '请输入4位数字', trigger: 'blur'}
        ],
        role:[{required: true, message: "请选择角色", trigger: 'change'}]
      }
    }
  },
  methods: {
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.Codes, 4)
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
            this.randomNum(0, this.identifyCodes.length)
            ];
      }
    },
    changeType() {
      this.isLogin = !this.isLogin
      this.loginForm.no = ''
      this.loginForm.userpwd = ''
    },
    //学生登录
    login: function () {
      this.$refs.loginFormRef.validate(valid => {
        if (valid) {
          axios.post('/students/login', {
            no: this.loginForm.no,
            pwd: this.loginForm.userpwd,
            identifyCode: this.identifyCode,
            code: this.loginForm.check,
          }).then(res => {
            let r = res.data
            if (r.flag === true) {
              alert(r.msg)
              window.sessionStorage.setItem('token', r.token)
              this.$router.push('/index')
            } else {
              alert(r.msg)
            }
          }).catch(err => {
            console.log(err)
          })
        }
      })
    },
    // 审批人员登录
    superLogin(){
      this.$refs.loginFormRef.validate(async valid => {
        if (valid) {
          axios.post('/teachers/login', {
            id: this.loginForm.no,
            pwd: this.loginForm.userpwd,
            role:this.loginForm.role,
            identifyCode: this.identifyCode,
            code: this.loginForm.check,
          }).then(res => {
            let r = res.data
            if (r.flag === true) {
              alert(r.msg)
              window.sessionStorage.setItem('token', r.token)
              this.$router.push('/exaHome')
            } else {
              alert(r.msg)
            }
          }).catch(err => {
            console.log(err)
          })
        }
      })
    },
    register() {
      this.$router.push({path: '/register'})
    }
  },
  mounted() {
    this.makeCode(this.identifyCodes, 4);
  }
}
</script>

<style>
html {
  font-size: 62.5%;
}
@media only screen and (min-width: 481px){
  html {
    font-size: 94%!important;
  }
}
@media only screen and (min-width: 561px){
  html {
    font-size: 109%!important;
  }

}
@media only screen and (min-width: 641px){
  html {
    font-size: 125%!important;
  }
}
.login-register {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  background: url("../assets/img/html/bg.jpg") no-repeat;
  background-size: 100% 100%;
}
.el-form{width: 75%;}
.el-form-item__content{flex-wrap: nowrap!important;}
</style>
<style scoped="scoped">
.contain {
  width: 40%;
  height: 45%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 0 3px #f0f0f0,
  0 0 6px #f0f0f0;
}

.big-box {
  width: 70%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 30%;
  transform: translateX(0%);
  transition: all 1s;
}

.big-contain {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.btitle {
  font-size: 1.2em;
  font-weight: bold;
  color: #2486b9;
  height: 20%;
}

.small-box {
  width: 30%;
  height: 100%;
  background: #2486b9;
  position: absolute;
  text-align: center;
  top: 0;
  left: 0;
  transform: translateX(0%);
  transition: all 1s;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}


.small-contain {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.stitle {
  font-size: 1.5em;
  font-weight: bold;
  color: #fff;
  height: 20%;
}

.scontent {
  height: 40%;
  font-size: 0.8em;
  color: #fff;
  text-align: center;
  padding: 2em 4em;
  line-height: 1.7em;
  writing-mode: tb-rl;
}

.sbutton {
  width: 60%;
  height: 40px;
  border-radius: 24px;
  border: 1px solid #fff;
  outline: none;
  background-color: transparent;
  color: #fff;
  font-size: 0.9em;
  cursor: pointer;
}

.big-box.active {
  left: 0;
  transition: all 0.5s;
}

.small-box.active {
  left: 100%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  transform: translateX(-100%);
  transition: all 1s;
}

.code {
  height: 32px;
  width: 117px;
}
</style>
